<template>
  <div>
    <el-container class="">
      <el-main class="me-main">
        <div style="margin-bottom: 50px;">
          <el-card class="box-card" v-for="(item,index) in messageList" :key="index" style="margin-bottom: 10px;">
            <span>{{ item.content }}</span>
            <!--<div class="creationDate">{{item.name}}</div>-->
            <div class="me-article-footer" style="color: rgb(148, 152, 156);font-size: 12px;margin-top: 20px;">
	  	        <span class="me-article-author">
	    	        <i class="me-icon-author"></i>&nbsp;{{item.name}}
	            </span>
              <span class="me-pull-right me-article-count">
	    	        <i class="el-icon-time"></i>&nbsp;{{item.createTime}}
	            </span>

            </div>
          </el-card>
        </div>
        <el-form :model="numberValidateForm" ref="numberValidateForm">
          <el-form-item
            prop="content"
            :rules="rules"
          >
            <el-input v-model="numberValidateForm.content"
                      type="textarea"
                      rows="5"
                      maxlength="200"
                      show-word-limit
                      placeholder="请输入你的评论"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('numberValidateForm')" size="small">提 交</el-button>
            <el-button @click="resetForm('numberValidateForm')" size="small">清 空</el-button>
          </el-form-item>
        </el-form>
      </el-main>
    </el-container>
  </div>

</template>

<script>
  export default {
    name: 'MessageBoard',
    data() {
      return {
        numberValidateForm: {
          content: ''
        },
        messageList: [],
        rules: {required: true, message: '不能为空'},
      }
    },
    filters:{
      formatTime2(time){
        return new Date(time) ;
      }
    },

    computed: {
      title() {
        return '留言板 - For Fun'
      }
    },
    created() {
      this.getMessageList()
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$post('/message/add', {
              content: this.numberValidateForm.content
            }).then(res => {
              this.$message({
                type: "success",
                message: res.message
              });
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      getMessageList() {
        this.$post('/message/list', {
          pageIndex: 1,
          pageSize: 20
        }).then(res => {
          this.messageList = res.data.list
        })
      }
    }
  }
</script>

<style scoped>
  .me-message {
  }

  .el-container {
    width: 700px;
  }

  .me-main {
    overflow: hidden;
  }

  .me-log-box {
    margin-left: 30%;
    margin-top: 20px;

  }

</style>
